// less的mixin
.flex() {
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box; /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox; /* 混合版本语法: IE 10 */
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}

//主轴为水平方向，起点在左边
.flex-row() {
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

//主轴为垂直方向，起点在上沿
.flex-column() {
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

//伸缩宽度
.flex-1() {
  -webkit-flex: 1; /* 新版本语法: Chrome 21+ */
  flex: 1; /* 新版本语法: Opera 12.1, Firefox 22+ */
  -webkit-box-flex: 1; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  -moz-box-flex: 1; /* 老版本语法: Firefox (buggy) */
  -ms-flex: 1; /* 混合版本语法: IE 10 */
}

// 主轴左对齐
.flex-justify-start() {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  justify-content: flex-start;
}

// 主轴右对齐
.flex-justify-end() {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  justify-content: flex-end;
}

// 主轴居中对齐
.flex-justify-center() {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}

// 主轴两端对齐,项目之间的间隔都相等
.flex-justify-between() {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
}

// 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
.flex-justify-around() {
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  justify-content: space-around;
}

// 交叉轴的起点对齐
.flex-align-start() {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  -ms-align-items: flex-start;
  align-items: flex-start;
}

// 交叉轴的终点对齐
.flex-align-end() {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  -ms-align-items: flex-end;
  align-items: flex-end;
}


// 交叉轴的中点对齐
.flex-align-center() {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
}


// 项目的第一行文字的基线对齐
.flex-align-baseline() {
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -moz-align-items: baseline;
  -ms-align-items: baseline;
  align-items: baseline;
}

// （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
.flex-align-stretch() {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
  align-items: stretch;
}

// 换行，第一行在上方
.flex-wrap() {
  -webkit-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}
// 不换行
.flex-nowrap{
  -webkit-flex-wrap: nowrap;
  -moz-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  -o-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
